<template>
   <div class='box'>
   <div class='header'>
      <img src='../img/1.png'>
      <div class='box'>
         <select><option>北京市</option></select>
          <div class="zhong"></div>
             <div class="you">
                <img src="../img/2-2.png" alt="">
                <img src="../img/3-3.png" alt="">
             </div>
      </div>
   </div>
      <div class="pict">
         <div class="tu">
             <img src="../img/2-22.png" alt="">
         </div>
         <div class="me"><span>王海超</span></div>
     </div>

     <div class='three'>
        <div class='one'><span style="color:#ff4c4c">--</span><span style="color:#808080">v金</span></div>
        <div class='two'><span style="color:#ff4c4c">--元</span><span>余额充200送200劵</span></div>
        <div class='three1'><span style="color:#ff4c4c">--张</span><span style="color:#808080">我的卡劵</span></div>
     </div>

     <div class='acti'>
       <ul>
         <li><img src="../img/3.png"></li>
         <li style="margin-top:0.3rem"><img src="../img/4.png"></li>
       </ul>
     </div>

       <ul class="list-menus">
         <li>
           <img src="../img/5.png">
           <span>v金商城</span>
         </li>
         <li>
            <img src="../img/9.png">
            <span>优惠券商城</span>
         </li>
         <li>
            <img src="../img/7.png">
            <span>好物商城</span>
         </li>
	   </ul>
        <ul class="list-menus">
         <li>
           <img src="../img/7.png">
           <span>v金抽奖</span>
         </li>
         <li>
            <img src="../img/9.png">
            <span>天天半价</span>
         </li>
         <li>
            <img src="../img/10.png">
            <span>我的卡劵</span> 
         </li>
	   </ul>
       
       <div class='tus'>
         <img src="../img/24.png">
       </div>
       <div class='beau'>
          <span class='zuo'><img src="../img/16.png"></span>
          <span class='you'>热门</span>
       </div>
       <div class='pictuer'>
            
               <img src="../img/17.png">
               <img src="../img/18.png">
               <img src="../img/19.png">
               <img src="../img/20.png">
          
       </div>
       <div class='beau'>
          <span class='zuo'><img src="../img/21.png"></span>
          <span class='you'>新品</span>
       </div>
       <div class='pictuer'>
            
               <img src="../img/17.png">
               <img src="../img/18.png">
               <img src="../img/19.png">
               <img src="../img/20.png">
          
       </div>
   </div>
    
</template>

<script>
export default{
    data() {
        return {

        }
    },
    components: {

    }
}
</script>

<style scoped lang="less">
   .box{
       width:100%;
       height:100%;
   }
    .header{
        height:12rem;
        width:100%;
        position:relative;
        img{
            width:100%;
            height:100%;
        }
        .box{
          position:absolute;
          width:100%;
          height:3rem;
          top:0;
          display:flex;
          select{
                background: #bebcb6;
                opacity: 0.6;
                color: #fff;
                width: 30%;
                float: left;
                border-radius: 2.5rem;
                height: 80%;
                margin-top:0.9rem; 
                text-align: center;
                margin-left: 0.5rem;
                border: none;
                outline: none;
             }
            .zhong{
                 width: 40%;
                 float: left;
            }
            .you{
                 float: right;
                 width: 30%;
                 text-align: center;
                 height: 80%;
                 display: flex;
                 img{
                      width:40%;
                      float: left;
                      height: 100%;
                      padding-top: 0.9rem;
                      padding-right: 0.9rem;

                 }

            }
        }
    }

    .pict{
    display: flex;
    height: 5rem;
    position: relative;

}
.pict .tu{
    width:18%;
    float: left;
    height: 100%;
    position: absolute;
}
.pict .tu img{
    width: 60%;
    position: absolute;
    top: -24px;
    left: 3rem;
    bottom: 1rem
}
.pict .me{
    width:20%;
    height: 100%;
    float: right;
    font-size: 1rem;
    text-align: center;
    position: absolute;left: 10rem;
    line-height: 4.5rem
}
.pice .me span{
    width: 100%;

}
.three{
    display:flex;
    width:100%;
   .one{
       width:20%;
       float:left;
        span{
            display:flex;
             flex-direction:column;
             text-align:center;
             line-height:1.3rem;
        }
   }
   .two{
       width:50%;
       float:left;
        span{
            display:flex;
             flex-direction:column;
              text-align:center;
                line-height:1.3rem;
        }

   }
   .three1{
       width:30%;
       float:right;
        span{
            display:flex;
             flex-direction:column;
              text-align:center;
                line-height:1.3rem;
        }
   }
}

.acti{
    display:flex;
    margin-top: 7px;
    ul{
        width:100%;
        li{
        float:left;
        width:45%;
        text-align:center;
        flex:1;
        margin-left: 5%;
        img{
            width:90%;
            float:left;
             text-align:center;
             display:block;
        }
    }
    }
}
.list-menus {
  display: flex;
  padding-top: 15px;
}
.list-menus li img{
    width:50%;
}
.list-menus li {
  flex: 1;
  list-style: none;
  text-align: center;
}
.list-menus li:last-child {
  border-right: none;
}
.list-menus li span {
  display: block;
  padding-top:1rem;
}
.tus{
    width:100%;
    height:10rem;
    background:red;
    margin-top:1rem;
    img{
        width:100%;
        height:100%;
    }
}
.beau{
    display:flex;
    margin-top:2rem;
    .zuo{
        float:left;
        width:50%;
        img{
            width:30%;
            text-align:center;
            padding-left:7rem;
        }
    }
    .you{
        float:right;
        width:50%;
        padding-top:0.8rem;
        display:block;
        font-size:2rem;
    }
}
.pictuer{
    margin-top:1.5rem;
    height:21rem;
     img{
         width:45%;
         text-align:center;
         padding-left:0.6rem;
         padding-top:0.3rem;
     }
}
</style>